<template>
    <div ref="kl-button" :class="className">
        <slot>默认slot</slot>
    </div>
</template>

<script>
export default {
    props: {
        type: {
            type: String
        }
    },
    data() {
        return {
            className: ['kl-button'],
        }
    },
    mounted() {
        console.log('type:', this.type)
        this.changeClass(this.type)
    },
    methods: {
        changeClass(type) {
            this.className.push(type)
        }
    }
}
</script>

<style lang="scss" scoped>
    .kl-button{
        display:inline-block;
        border: 1px solid #dcdfe6;
        padding: 5px;
        border-radius: 3px;
        // color: #dcdfe6;
    }

    .kl-button:hover {
        cursor: pointer;
        background-color: #ecf5ff;
        border: 1px solid #409eff;
        color: #409eff;
    }

    .primary {
        display:inline-block;
        background-color: #409eff;
        color: #fff;
        border: 0px;
    }

    .primary:hover {
        background-color: #66b1ff;
        color: #fff;
    }
</style>